<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import hdxy from '../assets/image/hdxy.jpg'
import am from '../assets/image/am.webp'
import cwdy from '../assets/image/cwdy.webp'
import qfl from '../assets/image/qfl.webp'
import sjslygw from '../assets/image/sjslygw.webp'
const activeIndex = ref(0);
const delayIndex = ref(0);
const router = useRouter();
const imageList = ref([hdxy, am, qfl, cwdy, sjslygw])
const onChange = ref(false);
const scrollTo = (index: number) => {
    onChange.value = true
    delayIndex.value = index;
}
const changeImage = () => {
    if (onChange.value) {
        onChange.value = false;
        activeIndex.value = delayIndex.value;
    }
}
const autoNext = () => {
    if (delayIndex.value < 4) {
        scrollTo(delayIndex.value + 1)
    } else {
        scrollTo(0)
    }
}
let timer = setInterval(autoNext, 4000)
const next = () => {
    if (delayIndex.value != 4 && activeIndex.value != 4) {
        scrollTo(activeIndex.value + 1)
    } else {
        scrollTo(0)
    }
}
const last = () => {
    if (delayIndex.value != 0 && activeIndex.value != 0) {
        scrollTo(activeIndex.value - 1)
    } else {
        scrollTo(4);
    }
}
const toMusicPage = (id: number) => {
    router.push({
        name: 'singleMusic',
        params: {
            musicId: id
        }
    })
}
const to = () => {
    switch (activeIndex.value) {
        case 0:
            toMusicPage(16);
            break
        case 1:
            toMusicPage(17);
            break
        case 2:
            toMusicPage(14);
            break
        case 3:
            toMusicPage(15);
            break
        case 4:
            toMusicPage(18);
            break
    }
}
const clickTo = (index: number) => {

    clearInterval(timer)
    activeIndex.value = index
    delayIndex.value = index
    timer = setInterval(autoNext, 4000)
}
</script>
<template>
    <div class="content" :style="{ '--bgurl': ('url(' + imageList[activeIndex] + ')') }">
        <ul class="imageBox">
            <li @click="to" @animationend="changeImage" :class="{ item: !onChange, itemChange: onChange }">
                <img style="width: 950px; height: 370px;" :src="imageList[activeIndex]" alt="">
            </li>
            <ul class="dot">
                <li :class="{ active: activeIndex == 0 }" @click="clickTo(0)"></li>
                <li :class="{ active: activeIndex == 1 }" @click="clickTo(1)"> </li>
                <li :class="{ active: activeIndex == 2 }" @click="clickTo(2)"> </li>
                <li :class="{ active: activeIndex == 3 }" @click="clickTo(3)"> </li>
                <li :class="{ active: activeIndex == 4 }" @click="clickTo(4)"> </li>
            </ul>
        </ul>

        <div class="arrow">
            <img @click="last" style="margin-right: 490px;" class="icon" src="../assets/arrow-left.svg">
            <img @click="next" style="margin-left: 490px;" class="icon" src="../assets/arrow-right.svg">
        </div>
        <div class="mask">

        </div>
    </div>
</template>
<style scoped lang="css">
.arrow .icon:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.arrow .icon {
    width: 60px;
    height: 60px;
    cursor: pointer;

}

.arrow {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    display: flex;
    align-content: center;
    justify-content: center;
    top: 240px;
}

.content::before {
    position: absolute;
    content: '';
    top: 127px;
    left: 0;
    right: 0;
    bottom: 0;
    height: 322px;
    width: 100vw;
    z-index: -1;
    background-image: var(--bgurl);
    background-position: center;
    background-size: cover;

}

.content::before {
    filter: blur(30px);
    margin: -50px;
}


.imageBox {
    background-color: white;
    margin: 0;
    padding: 0;
    display: flex;
    position: relative;
    width: var(--content-width);
    margin: auto;
    margin-bottom: -5px;
    /* overflow: hidden; */
    /* box-shadow: 5px 5px 5px gray; */
}


.imageBox .item {
    list-style: none;
    float: left;
    animation: slideIn 0.4s normal ease-in;
    height: 369px;
    width: 950px;
}

.imageBox .itemChange {
    list-style: none;
    float: left;
    animation: slideOut 0.4s normal ease-out;
    height: 369px;
    width: 950px;
}

.dot li {
    border-radius: 50%;
    --dor-size: 8px;

    height: var(--dor-size);
    width: var(--dor-size);
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.5);
    list-style: none;
}

@keyframes slideIn {
    0% {
        opacity: 0.4;
    }

    100% {
        opacity: 1;
    }
}

@keyframes slideOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0.4;
    }
}

.active {
    background-color: rgba(255, 255, 255, 0.8) !important;
}

.dot {
    position: absolute;
    display: flex;
    width: 950px;
    justify-content: space-around;
    top: 340px;
    margin-left: 0;
    padding-left: 350px !important;
    padding-right: 350px;
    box-sizing: border-box;
    z-index: 5;
}





.imageBox img {
    width: var(--content-width);
    object-fit: cover;
}

.content {
    display: flex;
    margin: auto;

}
</style>